<!--下户=》未派单=》操作中的派单！-->

<!--未派单页面-->
<template>
  <div class="main clearfix">
    <!-- 下户=》未派单=》关键字搜索框！ -->
    <section class="section_wrap wrap_te">
      <el-form
        :inline="true"
        style="text-align: left"
        :model="query"
        ref="query"
        class="query"
      >
        <el-form-item label="关键词:" prop="keyword">
          <el-input
            placeholder="订单号、客户名称、客户手机"
            v-model="query.keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item class="button">
          <el-button v-no-more-click type="primary" @click="searchData"
            >搜索</el-button
          >
          <el-button type="danger" @click="DataDelete">清空</el-button>
        </el-form-item>
      </el-form>
    </section>
    <!-- 下户=》未派单=》未派单列表！ -->
    <section class="section_wrap">
      <el-table
        :data="tableData"
        :inline="true"
        border
        stripe
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          prop="orderNum"
          label="业务单号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="borrowerName"
          label="客户名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="address"
          label="客户地区"
          :show-overflow-tooltip="true"
        />
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: #45b8ef"
              @click="openDia(scope.row)"
              >派单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="pagination clearfix">
        <span class="title">小计：共{{ this.total }}条数据</span>
        <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="total"
          :page-size="query.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </section>

    <el-dialog
      title="指派订单"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false"
    >
      <div class="surDia">
        <ul>
          <li class="clearfix">
            <span class="l">客户姓名</span>
            <div class="r">{{ diaData.name }}</div>
          </li>
          <li class="clearfix">
            <span class="l">地址</span>
            <div class="r">
              {{ diaData.address }}
            </div>
          </li>
          <li class="clearfix">
            <span class="l">手机号</span>
            <div class="r">
              {{ diaData.phone }}
            </div>
          </li>
          <li class="clearfix">
            <span class="l">选择派单角色</span>
            <div class="r t">
              <el-select
                v-model="roListId"
                size="small"
                @change="choseRoleId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in diaRoList"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </li>
          <li class="clearfix">
            <span class="l">选择派单人员</span>
            <div class="r t">
              <el-select
                v-model="diaData.eid"
                size="small"
                placeholder="请选择"
                @change="changeRole"
              >
                <el-option
                  v-for="item in RoleList"
                  :key="item.id"
                  :label="item.empName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
<!--        <div class="mapbox">-->
<!--          <Map @bMapDate="bMapDate"></Map>-->
<!--        </div>-->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSurveyList,
  getSurveyRole,
  getSurRole,
  surAppoint,
} from "../../../src/assets/js/api";
// import Map from "@/components/map/Map";
export default {
  data() {
    return {
      loading: false,
      query: {
        pageSize: 10,
        pageNo: 1,
        keyWord: "",
      },
      tableData: [],
      pages: 0,
      pageNum: 0,
      total: 0,
      currentPage: 1,
      dialogVisible: false,
      diaRoList: [],
      RoleList: [],
      roListId: null,
      roleName: null,
      diaData: {
        orderNum: null,
        address: null,
        eid: null,
        name: null,
        la: null,
        lo: null,
      },
    };
  },
  // components: {
  //   Map,
  // },
  created() {
    this.loading = true;
    this.getList();
  },
  computed: {},
  methods: {
    //清空按钮!
    DataDelete() {
      this.query.keyWord = "";
      this.getList();
    },
    send() {
      if (!this.diaData.eid) {
        this.$message.error("请选择正确的派单人员");
        return;
      }
      // if (!this.diaData.la || !this.diaData.lo) {
      //   this.$message.error("请选择正确的下户地址");
      //   return;
      // }
      this.$confirm(
        "是否确定将此订单派给" + this.roleName + ", 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "我在想想",
          type: "warning",
        }
      )
        .then(() => {
          this.surAppoint();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "再想一想",
          });
        });
    },
    //地图组件
    bMapDate(lng, lat) {
      this.diaData.la = lat;
      this.diaData.lo = lng;
    },
    //搜索
    searchData() {
      this.query.pageNo = 1;
      this.getList(this.query);
    },
    //派单
    surAppoint() {
      surAppoint(this.diaData).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "派单成功",
          });
          setTimeout(() => {
            //成功后刷新数据
            this.Refresh();
          }, 500);
        }
      });
    },
    Refresh() {
      this.getList();
    },
    //打开弹窗
    openDia(obj) {
      this.diaData.orderNum = obj.orderNum; //订单号!
      this.diaData.address = obj.address; //客户所在地区!
      this.diaData.name = obj.borrowerName; //客户名字!
      this.diaData.phone = obj.borrowerPhone; //客户电话号码!
      this.dialogVisible = true;
      if (this.diaRoList.length) return;
      this.getSurveyRoList();
    },
    //获取下拉角色
    getSurveyRoList() {
      getSurveyRole().then((res) => {
        this.diaRoList = res.data;
      });
    },
    choseRoleId() {
      this.diaData.eid = null;
      this.getRoleList(this.roListId);
    },
    changeRole(id) {
      let f_ById = this.RoleList.find((item) => {
        return item.id == id;
      });
      this.roleName = f_ById.empName;
    },
    //根据下拉角色获取下拉人员
    getRoleList(id) {
      getSurRole(id).then((res) => {
        this.RoleList = res.data;
      });
    },
    //获取下户列表
    getList() {
      getSurveyList(this.query).then((res) => {
        let resData = res.data;
        this.tableData = resData.records;
        this.pages = resData.pages;
        this.pageNum = resData.current;
        this.total = resData.total;
        this.loading = false;
      });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      let queryData = this.query;
      this.getList(queryData);
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      let queryData = this.query;
      this.getList(queryData);
    },
  },
};
</script>
<style lang="less" scoped>
.query
{
    .el-form-item
    {
        position: relative;  box-sizing: border-box;  width: 320px;  height: 32px;  margin-bottom: 0;
 padding-left: 110px; 
    }
    ::v-deep .el-form-item__label
    { line-height: 32px; 

        position: absolute;  top: 0;  left: 0;  width: 110px;  height: 32px;
 text-align: right; 
    }

    ::v-deep.el-input__icon,
    ::v-deep.el-range-separator
    {
        line-height: 24px;
    }
    ::v-deep .el-form-item__content
    {
        line-height: 32px;  width: 100%;
    }
    ::v-deep .el-input__inner
    { line-height: 32px;

        height: 32px; 
    }
    .button.el-form-item
    {
        padding-left: 0;
    }
    .button .el-button
    { line-height: 0;

        width: 80px;  height: 32px; 
    }
}
.pagination
{
    ::v-deep .el-pagination
    {
        position: absolute;  right: 0;
 margin-top: 20px; 
    }
    ::v-deep .el-pagination__total
    {
        visibility: hidden;
    }
    .title
    { font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;

        position: absolute;  top: 20px;  left: 0;  color: rgba(51, 51, 51, 1); 
    }
}

.surDia
{
    li
    {
        padding: 5px 0;
    }
    .l
    { font-size: 16px;  line-height: 32px;
 float: left; 

        width: 120px;  padding-right: 10px;  text-align: right; 
    }
    .r
    { line-height: 32px;
 float: left; 

        width: calc(100% - 130px);  text-align: left; 
    }
}
.mapbox
{
    width: 100%;  height: 200px;
}

</style>
